<template>
	<view :class="curTab == 1 || curTab == 2 ? 'disable':''">
		<view class="img">
			<image src="/static/new/index/couponBg.png" mode="widthFix" class="bg"></image>
			<view class="type u-flex">{{info.coupon_type == 10 ? '满减券' : '折扣券'}}</view>
			<view class="jian u-text-pink2 u-flex-center u-col-bottom">
				<text>{{info.coupon_type == 10 ? Number(info.reduce_price) : info.discount}}</text>{{info.coupon_type == 10 ? '元' : '折'}}
			</view>
			<view class="man u-flex-center u-text-pink3">满{{Number(info.min_price)}}元可用</view>
		</view>
		<view class="title">
			<!-- 名字 -->
			<view class="name" v-if="type == 1">
				{{info.coupon_type == 10 ? '满'+Number(info.min_price) +'元'+ '立减'+Number(info.reduce_price)+'元' : info.discount + '折饮品券'}}
			</view>
			<view class="name" v-if="type == 2">
				{{info.name}}
			</view>
			<!-- 条件 -->
			<view class="tip">
				{{info.apply_range == 10 ? '全场饮品通用,' : info.apply_range == 20 ? '指定商品可用,' : info.apply_range ==30 ? '排除商品可用,' :''}}
				{{type == 1 ? '满'+Number(info.min_price)+'元可用' : info.coupon_type == 10 ? '满'+Number(info.min_price) +'元'+ '立减'+Number(info.reduce_price)+'元' : info.discount + '折饮品券'}}
				{{info.expire_type == 20 ? '\n有效期：' + info.start_time + '~' + info.end_time  : ',兑换后' +info.expire_day +'天内有效'}}
			</view>
			<!-- 积分/状态 -->
			<view class="points u-text-pink2 u-flex" v-if="type == 1">
				<view class="points-num">{{info.integral_num}}</view>
				<view class="points-text">积分</view>
			</view>
			<view class="points u-text-pink2 u-flex" v-if="type == 2">
				<view class="points-num">{{curTab == 0 ?'未使用' : curTab == 1 ?'已使用' : '已过期'}}</view>
			</view>
		</view>
		<!-- 优惠券说明 -->
		<view class="cont" v-if="info.describe">
			<view class="cont-tit">
				优惠券说明
			</view>
			<view class="cont-det">
				{{info.describe}}
			</view>
		</view>
		<!-- 指定商品或排除商品列表 -->
		<view class="cont" :class="info.apply_range == 30 ? 'disable':''"
			v-if="info.apply_range == 20 || info.apply_range == 30">
			<view class="cont-tit u-flex">
				<image src="/static/new/index/store/appoint.png" v-if="info.apply_range == 20"></image>
				<image src="/static/new/index/store/disable.png" v-if="info.apply_range == 30"></image>
				{{info.apply_range == 20 ? '指定商品' : info.apply_range ==30 ?'不可用商品' : ''}}
			</view>
			<view class="hot-wrap u-flex">
				<view class="hot-item" v-for="item,index in goodsList" @click="onTargetGoods(item.goods_id)">
					<view class="hot-img">
						<image :src="item.goods_image" mode="aspectFill"></image>
					</view>
					<view class="hot-cont">
						<view class="hot-name">{{item.goods_name}}</view>
						<view class="u-flex u-row-between">
							<view :class="info.apply_range == 20 ?'u-text-pink2' : ''">￥{{item.goods_price_max}}</view>
							<u-icon @click.stop="goCategory(item.goods_id)" name="plus-circle-fill" size="50"
								color="#7ca934"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as GoodsApi from '@/api/goods'
	export default {
		data() {
			return {
				info: {},
				type: null, //1魔法铺  2我的优惠券
				curTab: null, //0未使用  1已使用  2已过期
				goodsList: [], //指定商品或排除商品列表
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.info = JSON.parse(options.item)
			this.type = options.type
			if (options.curTab) {
				this.curTab = options.curTab
			}
			if (this.info.apply_range != 10) {
				//商品列表
				this.getGoods()
			}
		},
		methods: {
			// 推荐商品列表
			getGoods() {
				const app = this
				GoodsApi.list()
					.then(result => {
						this.goodsList = result.data.list.data.filter(item => this.info.apply_range_config.goodsIds
							.includes(item.goods_id))
					})
			},
			// 跳转至商品列表页
			onTargetGoods(goodsId) {
				if (this.info.apply_range == 20) {
					this.$navTo('pages/goods/detail', {
						goodsId
					})
				}
			},
		},
	}
</script>

<style>
	page {
		background: #f4f4f6;
	}
</style>
<style lang="scss" scoped>
	.img {
		height: 472rpx;
		background: #eee;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;
		overflow: hidden;
		
		.bg {
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
		}

		.type {
			position: absolute;
			left: 0;
			width: 19%;
			height: 465rpx;
			font-size: 60rpx;
			padding: 0 25rpx;
			font-weight: bold;
			color: #fff;
			text-align: center;
		}

		.jian {
			position: absolute;
			right: 0;
			width: 53%;
			height: 220rpx;
			font-weight: bold;
			font-size: 65rpx;
			padding-right: 20rpx;

			text {
				height: 160rpx;
				font-size: 150rpx;
				margin-right: 7rpx;
			}
		}

		.man {
			width: 370rpx;
			position: absolute;
			right: 30rpx;
			bottom: 100rpx;
			font-size: 45rpx;
			padding: 10rpx 0;
			border-radius: 50rpx;
			color: #fff;
		}
	}

	.title {
		background: #fff;
		padding: 25rpx 30rpx;

		.name {
			font-weight: bold;
			font-size: 34rpx;
		}

		.tip {
			color: #646464;
			font-size: 26rpx;
			line-height: 40rpx;
			margin: 15rpx 0 20rpx 0;
			white-space: pre-line;
			/* 合并空白序列，但保留换行符 */
		}

		.points {
			font-weight: bold;

			.points-num {
				font-size: 40rpx;
				margin-right: 6rpx;
			}

			.points-text {
				height: 32rpx;
				font-size: 28rpx;
			}
		}
	}

	.cont {
		background: #fff;
		margin-top: 20rpx;
		padding: 26rpx 30rpx;

		// 优惠券说明
		.cont-tit {
			font-weight: bold;
			font-size: 34rpx;
			margin-bottom: 20rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
			}
		}

		.cont-det {
			line-height: 50rpx;
			white-space: pre-line;
		}

		// 商品
		.hot-wrap::-webkit-scrollbar {
			display: none; //隐藏滚动条
		}

		.hot-wrap {
			overflow-x: auto;
			scroll-padding: 0px; // 可选，增加滚动时的边距 
			scroll-snap-type: x mandatory; // 强制水平滚动到最近的“snap点” 

			.hot-item {
				width: 300rpx;
				background: #fff;
				overflow: hidden;
				margin-right: 20rpx;
				border-radius: 15rpx;
				border: 1px solid #eee;
				flex: 0 0 auto; //不允许项目伸缩 
				scroll-snap-align: start; // 让每个项目在滚动时都“粘”在左边

				&:last-child {
					margin-right: 0;
				}

				.hot-img {
					width: 100%;

					image {
						width: 100%;
						height: 300rpx;
					}
				}

				.hot-cont {
					padding: 15rpx 25rpx 20rpx;

					.hot-name {
						// font-size: 27rpx;
						margin-bottom: 4rpx;
						font-weight: bold;

						white-space: nowrap;
						/* 强制文本不换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
					}
				}
			}
		}
	}

	// 整体变灰
	.disable {
		filter: grayscale(100%);
	}
</style>